<template>
    <div>
        <el-dialog title="增添细项" :visible.sync="dialogVisiable" :show-close="false" class="dialog">
            <el-form :model="form">
                <el-form-item label="细项名称" width="80px" prop="xx_name">
                    <el-select class="dialog_input1" v-model="form.xx_name" placeholder="请选择">
                        <el-option label="基础分" value="基础分"></el-option>
                        <el-option label="附加分" value="附加分"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="内容说明" width="80px" prop="content_sm">
                    <el-input class="dialog_input2" v-model="form.content_sm" type="text"></el-input>
                </el-form-item>
                <div style="display:flex;">
                    <el-form-item label="自评分" width="80px" prop>
                        <el-input class="dialog_input3" v-model="form.zy_self_score"
                            onkeyup="value=value.replace(/[^\d]/g,'')"
                            oninput="if(value>100)value=100;if(value<0)value=0"></el-input>
                    </el-form-item>
                    <el-form-item label="班委评分" width="80px">
                        <el-input class="dialog_input3" v-model="form.zy_bw_score"
                            onkeyup="value=value.replace(/[^\d]/g,'')"
                            oninput="if(value>100)value=100;if(value<0)value=0"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="日期" width="80px">
                    <el-date-picker v-model="form.zy_new_time" type="date" placeholder="选择日期" value-format="yyyy.MM.dd">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
                <el-button @click="dialogVisiable = false ">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Dialog',
    data() {
        return {
            dialogVisiable: false,
            form: {
                xx_name: '',
                content_sm: '',
                zy_self_score: '',
                zy_bw_score: '',
                zy_new_time: '',

            }
        }
    },
    methods: {
        openDialog() {
            this.dialogVisiable = true
        },
        submitForm(form) {

        },
        submit() {
            console.log(this.form);
            this.$emit("close");
        },
        addMember() {
            this.$axios
                .post("", {
                    name: this.form.xx_name,
                    内容说明: this.form.content_sm,

                })
                .then((res) => {
                    console.log(res);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    }
}
</script>

<style lang="scss" scoped>
.dialog_input2 {
    width: 80%;
}

.dialog_input3 {
    width: 31%;
}

.dialog {
    /deep/.el-dialog {
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: calc(100% - 10px);
        max-width: calc(100% - 10px);
        height: 50% !important;
        font-size: 0.5rem;
    }

    /deep/.el-dialog .el-dialog__body {
        flex: 1;
        overflow: auto;
    }
}
</style>